<template>
  <div
    style="width: 100%;height:60px;background-color: rgba(0,0,0,0.3);
    border-radius: 10px;border: 1px solid #e8e6c2;"
    class="layout-left-top my-dataPlayer"
  >
    <div
      style="width:70px;height: 20px;background-color: red;"
      class="layout-center"
    >{{getTime(currentTime)}}
    </div>
    <a-slider
      v-model="currentTime"
      :tip-formatter="formatter"
      style="width: calc(100% - 90px - 70px);"
      :min="0"
      :max="totalTime"
    />
    <div
      style="width:70px;height:20px;background-color: red;"
      class="layout-center"
    >{{getTime(totalTime)}}
    </div>

  </div>
</template>

<script>


  export default {
    props: ["totalTime"],
    components: {},
    data() {
      return {
        // 现在时间和所有时间根据组件要求只能传数值
        currentTime: 0,
      }
    },
    methods: {
      // 格式化提示的内容
      formatter(value) {
        return this.getTime(value)
      },
      // 时间戳转化为固定格式
      getTime(value) {
        if (value !== 0) {
          let secondTime = parseInt(value); // 秒
          let minuteTime = 0; // 分
          let hourTime = 0; // 小时
          if (secondTime > 60) {
            minuteTime = parseInt(secondTime / 60);
            secondTime = parseInt(secondTime % 60);
            if (minuteTime > 60) {
              hourTime = parseInt(minuteTime / 60);
              minuteTime = parseInt(minuteTime % 60);
            }
          }
          return ((hourTime > 0 ? hourTime < 10 ? "0" + hourTime : hourTime : "00") + ":") +
            ((minuteTime > 0 ? minuteTime < 10 ? "0" + minuteTime : minuteTime : "00") + ":") +
            (secondTime > 0 ? secondTime < 10 ? "0" + secondTime : secondTime : "00")
        } else {
          return '00:00:00'
        }
      },
    }
  }
</script>

<style lang="less" scoped>
  @color: '#e8e6c2';
  .color {
    color: @color;
  }

  .my-dataPlayer {
    .ant-slider {
      margin: 6px;
    }
  }
</style>